<!--新增评审活动-->
<template>
    <div>
        <div class="my-form-container" style="height:502px">
            <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm">
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">评审活动名称</div>
                        <el-form-item prop="activityName">
                            <div class="my-form-item-value">
                                <el-input class="inputWidth" v-model="ruleForm.activityName"></el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item" style="height:100px">
                    <el-col :span="24">
                        <div class="my-form-item-label">评审内容</div>
                        <el-form-item prop="docno">
                            <div class="my-form-item-value">
                                <el-radio-group v-model="ruleForm.type">
                                    <div class="line">
                                        <el-radio :label="1">线上</el-radio>
                                        <span class="small-btn color-green" @click="openChose">
                                            <img src="../../../../assets/assessment/icon-plan-record-detail.png">
                                            已有的课题活动中选择
                                        </span>
                                    </div>
                                    <div class="line">
                                        <el-radio :label="2">线下</el-radio>
                                        <el-upload action="string" :show-file-list="false" accept="..xls,.xlsx"
                                            :http-request="upLoadApi" :on-change="fileInfo">
                                            <!--  @click="addPS(scope.row)" -->
                                            <span class="small-btn color-yellow">
                                                <img src="../../../../assets/assessment/icon-import.png"> 导入评审附件
                                            </span>
                                        </el-upload>

                                        <div class="del-btn" v-if="ruleForm.excelFileName">
                                            <span>{{ ruleForm.excelFileName }}</span>
                                            <span @click="delFile">x</span>
                                        </div>
                                        <el-input size="mini" v-model="ruleForm.enclosure" style="margin-left:20px">
                                        </el-input>
                                    </div>
                                </el-radio-group>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">评审截止时间</div>
                        <el-form-item prop="endDate">
                            <div class="my-form-item-value">
                                <el-date-picker class="time" v-model="ruleForm.endDate" type="date"
                                    value-format="yyyy-MM-dd"></el-date-picker>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">选用评审标准体系</div>
                        <el-form-item prop="docno">
                            <div class="my-form-item-value">
                                <el-select v-model="ruleForm.zbtxId">
                                    <el-option v-for="i in type3" :key="i.zbtxId" :label="i.zbtxName" :value="i.zbtxId">
                                    </el-option>
                                </el-select>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">选用评审方式</div>
                        <div class="my-form-item-value">评审分数</div>
                    </el-col>
                </el-row>
                <el-row class="my-form-item">
                    <el-col :span="24">
                        <div class="my-form-item-label">指定评审专家</div>
                        <el-form-item prop="docno">
                            <div class="my-form-item-value chose-icon">
                                <el-input class="inputWidth" v-model="ruleForm.expertNameList" readonly></el-input>
                                <img src="../../../../assets/assessment/icon-plan-record-detail.png"
                                    @click="chosePeople">
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="my-form-item lastOne" style="border:none">
                    <el-col :span="24">
                        <div class="my-form-item-label">备注</div>
                        <el-form-item prop="remarks">
                            <div class="my-form-item-value" style="line-height:88px">
                                <el-input style="width:702px" v-model="ruleForm.remarks" type="textarea" :rows="3">
                                </el-input>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="button-group">
            <div class="" @click="save">保存</div>
            <div class="" @click="cancel">取消</div>
        </div>
        <!-- 已有的课题中选择 -->
        <el-dialog title="已有的课题中选择" :visible.sync="choseDialog" width="80%">
            <div class="table-container table-css">
                <el-table ref="tableYX" :data="type1" border style="width: 100%" class="table-data"
                    :header-cell-style="{ background: '#edf2f9', 'border-color': '#c7d7eb' }"
                    :header-cell-class-name="cellClass" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" align="center" width="100"></el-table-column>
                    <el-table-column prop="subActivityName" label="已创建活动名称" align="center" min-width="130">
                    </el-table-column>
                    <el-table-column prop="subCategoryName" label="活动所属类别" align="center" min-width="130">
                    </el-table-column>
                    <el-table-column prop="count" label="选择所属阶段/流程" align="center" min-width="300">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.jd" @change="(e) => { getLC(e, scope.row.subActivityId) }">
                                <el-option v-for="i in scope.row.acStageList" :key="i.acScsId" :label="i.acScsName"
                                    :value="i.acScsId"></el-option>
                            </el-select>
                            -
                            <el-select v-model="scope.row.lc">
                                <el-option v-model="scope.row.jd" v-for="i in type2" :key="i.subActivityId"
                                    :label="i.acScsFlowName" :value="i.acScsFlowId"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
                <h1 class="total-notice">当前共找到{{ total }}条记录，当前显示{{ (pageNo - 1) * 50 ==
                        0 ? 1 : (pageNo - 1) * 50
                }}-{{ total > 50 ? pageNo * 50 : total }}条</h1>
                <div class="pagination-block">
                    <el-pagination v-if="total > 50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
                        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
                </div>
            </div>
            <div class="button-group dialog-group">
                <div class="" @click="saveChose">保存</div>
            </div>
        </el-dialog>
        <!-- 指定评审专家 -->
        <choseZJ ref="choseZJ" @selectedT="getTeacher" :ruleFormProps="ruleForm"></choseZJ>
        <!-- <choseZJ ref="choseZJ" :ruleFormProps="ruleForm"></choseZJ> -->
    </div>
</template>

<script>
import { addPSActivity, updatePSActivity, choseList, getTypeActivityLC, pstxList, getOneActivity } from "@/api/teachingTopic";
import choseZJ from "./choseZJ.vue"
import Axios from 'axios'

export default {
    data() {
        return {
            tableData: [],
            type1: [],//已有的课题
            type2: [],
            type3: [],//评审体系列表
            ruleForm: {
                excelFileName: '',//文件回显名称
                activityName: '',//评审活动名称
                endDate: '',//评审截止时间
                zbtxId: '',//评审指标体系id
                remarks: '',//备注
                type: '',//线上，线下
                expertIdList: [],//评审专家id
                expertNameList: '',
                excelFile: '',//线下场景文件
                activityId: '',
                currentFlow: '',//流程
                currentStage: '',
                subActivityId: '',
                enclosure: '',
            },
            rules: {},
            choseDialog: false,
            total: 1,
            pageNo: 1,
            choseValue: [],
        }
    },
    mounted() {
        if (this.$route.query.datas && this.$route.query.datas != 'undefined') {
            console.log(this.$route.query.datas)
            this.ruleForm = this.$route.query.datas;
            this.ruleForm.expertNameList = this.ruleForm.expertList.map(i => i.name).join(',')
            this.ruleForm.expertIdList = this.ruleForm.expertList.map(i => String(i.id))
        }
        this.pstxArry()
    },
    components: { choseZJ },
    methods: {
        getTeacher(e) {
            let ruleForms = JSON.parse(JSON.stringify(this.ruleForm))
            ruleForms.expertIdList = e.map(i => i.xpaasId)
            ruleForms.expertNameList = e.map(i => i.xm).join(',')
            this.ruleForm = ruleForms
        },
        handleSelectionChange(e) {
            if (e.length > 1) {
                this.$refs.tableYX.clearSelection();
                this.$refs.tableYX.toggleRowSelection(e[0]);
            }
            this.choseValue = e[0];
        },
        async pstxArry() {
            let res = await pstxList({ current: 1, size: 1111111 });
            this.type3 = res.data.records
        },
        async getOneActivity() {
            let res = await getOneActivity(this.$route.query.activityId);
            console.log(res)
        },
        currentPage(e) {
            this.pageNo = e;
            this.getChosedList()
        },
        //已有课题活动中选择列表
        async getChosedList() {
            let res = await choseList();
            this.type1 = res.data.records.map(item => {
                let mes = {
                    ...item,
                    jd: '',
                    lc: ''
                }
                return mes
            })
        },
        async getLC(e, e1) {
            let res = await getTypeActivityLC({ acScsId: e, subActivityId: e1 });
            this.type2 = res.data;
            this.total = res.data.total
        },
        //保存数据
        async save() {
            let res;
            if (this.ruleForm.activityId) {
                res = await updatePSActivity(this.ruleForm)
            } else {
                res = await addPSActivity(this.ruleForm)
            }
            if (res.code == 200) {
                this.$router.push({
                    path: '/teachingTopics/review/newActivity/list'
                })
            }

        },
        cancel() {
            this.$router.push({
                path: '/teachingTopics/review/newActivity/list'
            })
        },
        cellClass(row) {
            if (row.columnIndex === 0) {
                return 'noneSelectHeader'
            }
        },
        openChose() {
            this.choseDialog = true;
            this.choseValue = {}
            this.getChosedList();
            this.$nextTick(() => {
                this.$refs.tableYX.clearSelection();
            })
        },
        saveChose() {
            this.choseDialog = false;
            this.ruleForm.subActivityId = this.choseValue.subActivityId;
            this.ruleForm.currentFlow = this.choseValue.lc;
            this.ruleForm.currentStage = this.choseValue.jd
        },
        chosePeople() {
            console.log('收到参数+++ ', this.$refs.choseZJ)
            this.$refs.choseZJ.dialogVisible = true;
            console.log('哈哈哈', this.ruleForm)
            // this.
        },
        upLoadApi(item) {
            let formData = new FormData();
            formData.append('file', item.file);
            this.ruleForm.excelFileName = item.file.name
            let requestUrl = this.$store.state.studentUrl.baseUrl + '/file/upload'
            Axios.post(requestUrl, formData).then(res => {
                if (res.data.success) {
                    this.$message({
                        type: 'success',
                        message: '上传成功！'
                    })
                    this.ruleForm.excelFile = res.data.data.fileUri
                }
            })
        },
        fileInfo(file) {
            if (file.name.indexOf("xls") == -1) {
                this.$message.error('请上传压缩包！');
            }
        },
        delFile() {
            this.ruleForm.excelFileName = ''
        }
    }
};
</script>
<style lang="less" scoped>
.table-css {
    margin: 30px auto 0;
    width: 90%;

    /deep/ .el-table td,
    .el-table th.is-leaf,
    .el-table--border,
    .el-table--group {
        border-color: #c7d7eb;
    }

    /deep/.el-table__header tr,
    .el-table__header th {
        padding: 0;
        height: 76px;
        background-color: #edf2f9;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        line-height: 20px;
        color: #004ca7;
    }

    /deep/.el-table__body tr,
    .el-table__body td {
        padding: 0;
        height: 86px;
    }

    /deep/ .el-table__footer-wrapper td {
        padding: 0;
        height: 86px;
    }

    /deep/.el-table thead.is-group th.el-table__cell {
        border-color: #c7d7eb;
    }

    /deep/ .el-table--border th,
    .el-table__fixed-right-patch {
        border-color: #c7d7eb;
    }
}
</style>
<style scoped lang="less" scoped>
@import "../../../../styles/commonCss.less";

.my-form-container {
    width: 1200px;
    margin: 20px auto 0;
}

.dialog-group {
    padding-bottom: 50px !important;

    div {
        margin-right: 0 !important;
    }
}

.color-yellow {
    width: 140px;
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
    height: 27px;
    flex-shrink: 0;
}

.color-green {
    background: #F1FFF8;
    border: 1px solid #02C86C;
    color: #02C86C;
    width: 194px;
}

.del-btn {
    position: relative;
    border: 1px solid #004CA7;
    border-radius: 4px;
    color: #004CA7;
    font-size: 12px;
    flex-shrink: 0;
    padding: 6px 16px;
    margin: 0 16px;

    span {
        &:nth-child(2) {
            position: absolute;
            top: 2px;
            right: 4px;
            cursor: pointer;
        }
    }
}

.line {
    display: flex;
    align-items: center;

    &:nth-child(1) {
        margin: 10px 0 20px;
    }

    /deep/.el-radio {
        margin-top: 4px;
    }

    .small-btn {
        font-size: 14px !important;
        margin: 0 !important;
    }
}

.chose-icon {
    display: flex;
    align-items: center;

    img {
        width: 24px;
        height: 24px;
        margin-left: 12px;
        cursor: pointer;
    }
}

/deep/.my-form-item-label {
    justify-content: center;
    padding: 0 !important;
}

.inputWidth {
    width: 240px;
}

.selectWidth {
    width: 224px;
}

.lastOne {
    border: none;
    height: 100px;

    /deep/.el-form-item__error {
        top: 96%;
    }
}

.el-table /deep/.noneSelectHeader .cell:before {
    content: "选择";
}

.el-table /deep/.noneSelectHeader .cell .el-checkbox {
    display: none;
}
</style>